/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from "react";
import { Table, Select, Button, Space, Modal, message } from "antd";
import EditForm from "./EditForm";
import MachineEditAdd from "./MachineEditAdd";
import "./machine.less";
import { ExpandedRowRender } from "./Price";
import { PriceForm } from "./PriceForm";
const { Option } = Select;

export default class Machine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      machineData: [],
      selectValue: 0,
      machineDetail: [],
      showEditPrice: false,
      showModel: false,
      showEditForm: false,
      editItem: {},
      deleteItem: {},
    };
  }
  columns = [
    {
      title: "矿机名称",
      dataIndex: "name",
      key: "id",
    },
    {
      title: "矿机容量(T)",
      dataIndex: "capacity",
      key: "id",
    },
    {
      title: "封装时间(日)",
      dataIndex: "sealTime",
      key: "id",
    },
    {
      title: "可用时间(日)",
      dataIndex: "vaildTime",
      key: "id",
    },
    // {
    //   title: "实时产量",
    //   dataIndex: "yield",
    //   key: "id",
    // },
    {
      title: "操作",
      dataIndex: "",
      key: "x",
      render: (e) => (
        <Space size="middle">
          <a onClick={() => this.addPrice(e)}>增加付款方式</a>
          <a onClick={() => this.editFormClick(e)}>编辑</a>
          <a onClick={() => this.handleDelete(e)}>删除</a>
        </Space>
      ),
    },
  ];
  addPrice = (e) => {
    this.setState({
      showEditPrice: true,
      editItem: e,
    });
  };
  editFormClick = (e) => {
    this.setState({
      showEditForm: true,
      editItem: e,
    });
  };
  editPrice = (_, a) => {
    this.setState({
      editItem: a,
    });
  };
  closeModel = () => {
    this.setState({
      showModel: false,
    });
  };
  closeForm = () => {
    this.setState({
      showEditForm: false,
      editItem: {},
    });
  };
  handleChange = (e) => {
    console.log(e);
    this.setState({
      selectValue: e,
      machineDetail: this.state.machineData.find((i) => i.id === e)
        .machineSizeDtos,
    });
  };
  handleDelete = (e) => {
    this.setState({
      showModel: true,
      deleteItem: e,
    });
  };
  addClick = () => {
    if (!this.state.selectValue) {
      message.error("请选择矿机");
      return;
    }
    this.setState({
      showEditForm: true,
      editItem: this.state.selectValue,
    });
  };
  closeAddPrice = () => {
    this.setState({
      showEditPrice: false,
    });
  };
  async getData() {
    const res = await this.http("machine");
    this.setState({
      machineData: res.data.dtos,
      selectValue: res.data.dtos[0] ? res.data.dtos[0].id : null,
      machineDetail: res.data.dtos[0] ? res.data.dtos[0].machineSizeDtos : [],
    });
  }
  async deleteItem(e) {
    const res = e
      ? await this.http("MachinePrice/" + e.id, {}, "DELETE")
      : await this.http(
          "machineSize/" + this.state.deleteItem.id,
          {},
          "DELETE"
        );
    console.log(res);
    message.success("删除成功!");
    this.setState({
      showModel: false,
    });
    this.getData();
  }
  showBtn = () => {
    if (this.state.selectValue) {
      return (
        <Button type="primary" className="addBtn" onClick={this.addClick}>
          新增规格
        </Button>
      );
    }
  };

  componentDidMount() {
    this.getData();
  }
  render() {
    return (
      <div className="content">
        <Modal
          title=""
          onCancel={this.closeModel}
          onOk={() => {
            this.deleteItem();
            this.closeModel();
          }}
          visible={this.state.showModel}
        >
          确认删除吗？
        </Modal>
        <PriceForm
          close={this.closeAddPrice}
          show={this.state.showEditPrice}
          formData={this.state.editItem}
          refresh={() => {
            this.getData();
            this.closeAddPrice();
          }}
        ></PriceForm>
        <header className="header">
          <EditForm
            show={this.state.showEditForm}
            formData={this.state.editItem}
            close={this.closeForm}
            refresh={() => {
              this.getData();
              this.closeForm();
            }}
          ></EditForm>
          <Select
            value={this.state.selectValue}
            style={{ width: 120 }}
            onChange={this.handleChange}
          >
            {this.state.machineData.map((item, i) => {
              return (
                <Option key={i} value={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
          <MachineEditAdd
            refresh={() => {
              this.getData();
            }}
          ></MachineEditAdd>
          {this.showBtn()}
        </header>
        <Table
          rowKey={(data) => data.id}
          columns={this.columns}
          expandable={{
            expandedRowRender: (record, index) => {
              return (
                <ExpandedRowRender
                  refresh={() => {
                    this.getData();
                  }}
                  deleteItem={(e) => {
                    this.deleteItem(e);
                  }}
                  formData={record.prices}
                ></ExpandedRowRender>
              );
            },
          }}
          onExpand={this.editPrice}
          dataSource={this.state.machineDetail}
        />
      </div>
    );
  }
}
